<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		 
		<view class="body"> 
			<template v-if="show"> 
				<view class="goods-wrap m-b2" v-for="(item,index) in detail.product_list" :key="index">	
					<view class="item">
						<text class="label">货物ID：</text>
						<text>{{item.p_id}}</text> 
					</view>
					<view class="item">
						<text class="label">货物名称：</text>
						<text>{{item.pname}}</text> 
					</view>					
					<view class="item">
						<text class="label">申请数量：</text>
						<text>{{item.p_count}}{{item.uname}}</text> 
					</view> 
					
					<view class="item">
						<text class="label">库 存：</text>
						<view class="store-list">
							<text v-for="(subitem,subindex) in item.hp_count" :key="subindex">{{subitem.sname+'：'+Number(subitem.p_count)}}</text>
						</view>
					</view> 					
					
					<view v-if="item.inout_branch" class="send-store-list">
						<view class="item hd">
							<text>出货仓库</text> 
							<text>仓库管理员</text>
							<text>出货数量</text> 
							<text>状态</text>
						</view>
						<view v-if="subitem.store_username==userInfo.username" class="item" v-for="(subitem,subindex) in item.inout_branch" :key="subindex">
							<text>{{subitem.store_name}}</text> 
							<text>{{subitem.store_username}}</text>
							<text>{{subitem.num}}{{subitem.uname}}</text> 
							<text>
								<template v-if="subitem.ship_status==0">未发货</template>
								<template v-if="subitem.ship_status==1">已发货</template>
							</text>
						</view>
					</view>  
				</view>	
				
				<view class="goods-wrap m-b2">
					<view class="hd-title">其他信息:</view>
					<view class="detail-info m-b4">
						<view class="row-2">
							<view class="item">项目名称:{{detail.projectname}}</view>
							<view class="item">申请人:{{detail.username}}</view>
						</view>
						<view class="row-2">
							<view class="item">货款(元):{{detail.product_money}}</view>
							<view class="item">已结款(元):{{detail.payments}}</view>
						</view>
						<view class="item">结款状态:{{detail.project_status==2?'已结清':'未结清'}}</view>
						<view v-if="detail.sendproduct.length>0" class="item">配送费支付方式:
							<text v-if="detail.sendproduct[0].pay_type==1">寄付</text>
							<text v-if="detail.sendproduct[0].pay_type==2">到付</text>
							<text v-if="detail.sendproduct[0].pay_type==3">部分付</text>
							<text v-if="detail.sendproduct[0].pay_type==4">月结</text>
						</view>
					</view>  
					<template v-if="detail.sendproduct.length>0">
						<view class="hd-title">收货信息:</view>
						<view class="detail-info">
							<view class="row-2">
								<view class="item" style="display: flex;align-items: center;">
									<view class="m-r2">客户姓名:{{detail.sendproduct[0].NAME}}</view>
									<u-button text="复制姓名" type="warning" size="mini" class="btn" style="width: 100rpx;
									flex-shrink: 0;" @click="copy(detail.sendproduct[0].NAME)"></u-button>
								</view>
								<view class="item">配送方式:
									<template v-if="detail.sendproduct[0].send_type==1">物流-自提</template>
									<template v-if="detail.sendproduct[0].send_type==2">物流-送货上门</template>
									<template v-if="detail.sendproduct[0].send_type==3">快递</template>
								</view>
							</view>
							<view class="item" style="display: flex;align-items: center;">
								<view class="m-r2">手机号码:{{detail.sendproduct[0].phone}}</view>
								<view style="display: flex;align-items: center;">
									<u-button text="拨打电话" type="warning" size="mini" class="btn m-r1" style="width: 100rpx;
									flex-shrink: 0;" @click="call(detail.sendproduct[0].phone)"></u-button>
									<u-button text="复制电话" type="warning" size="mini" class="btn" style="width: 100rpx;
									flex-shrink: 0;" @click="copy(detail.sendproduct[0].phone)"></u-button>
								</view>
							</view>			 
							<view class="item" style="display: flex;justify-content: space-between;align-items: center;">
								<view>收货地址:{{detail.sendproduct[0].address}}</view>
								<u-button text="复制地址" type="warning" size="mini" class="btn" style="width: 100rpx;
								flex-shrink: 0;" @click="copy(detail.sendproduct[0].address)"></u-button>
							</view>		 
						</view> 
					</template>
				</view>
				
				<view class="goods-wrap m-b2">
					<view class="item">
						<text class="label">订单备注</text>
						<text>{{detail.apply_reason||''}}</text>
					</view>						
				</view>
				<!-- <view class="goods-wrap m-b2">
					<view class="hd-title">
						<u--text class="" text="订单备注" size="30" align="left" bold></u--text> 
					</view>	
					<u--textarea v-model="detail.apply_reason"  placeholder="请输入订单备注" count ></u--textarea>
				</view> -->
				
				<view style="padding: 0 20rpx 20rpx;display: flex;align-items: center;">
					<u-button type="primary" size="small" text="更新备注" class="m-r1" @click="showapplyreason"></u-button>
					<u-button type="primary" size="small" text="复制备注" class="m-l1" @click="copy(detail.apply_reason)"></u-button>
				</view>			
				
				<view v-if="form_status==2" class="goods-wrap m-b2">
					<view class="hd-title">物流信息:</view>
					<u--form :model="form" ref="uForm" class="form-wrap m-b2">  					
						<u-form-item label="物流名字" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
							<u-input type="text" v-model="form.send_name" placeholder="输入物流名字" border="none" /> 
						</u-form-item> 
						<u-form-item label="物流单号" labelWidth="160" prop="number" borderBottom="true" class="u-form-item">
							<u-input type="text" v-model="form.send_num" placeholder="输入物流单号" border="none" /> 
						</u-form-item> 
						<u-form-item label="快递费用" labelWidth="160" prop="unit" borderBottom="true" class="u-form-item">
							<u-input type="digit" v-model="form.pay_money" class="text-inp" border="none" placeholder="输入快递费用"/>
							<u--text class="text-unit" text="元" size="30" align="right" ></u--text>
						</u-form-item>
					</u--form>
				</view>
				
				<view v-if="detail.files_path.length>0" class="goods-wrap m-b2">
					<view class="hd-title">
						<text>申请凭证</text>						 
					</view>	
					<view class="m-b2">
						<view class="detail-wrap">
							<view class="detail-pic-item">
								<view class="detail-pic">
									<view v-if="(item.file_type==1||item.file_type==2||item.file_type==4||item.file_type==6)&&(item.file_ext=='jpg'||item.file_ext=='png'||item.file_ext=='jpeg')" class="pic-item" v-for="(item,index) in detail.files_path" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="item.files_path"	mode="widthFix"></image>
										</view>
									</view>
								</view>
								
							</view>
						</view> 
					</view>	 
				</view>
				
				<view v-if="false" class="goods-wrap m-b2">	
					<view class="hd-title">
						<text>凭证/发货</text>						 
					</view>	
					<view class="m-b2">
						<view class="detail-wrap">
							<view class="detail-pic-item">
								<view class="detail-pic">
									<view v-if="item.file_type==3&&(item.file_ext=='jpg'||item.file_ext=='png'||item.file_ext=='jpeg')" class="pic-item" v-for="(item,index) in detail.files_path" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix">
											<!-- 占位 -->
										</image>
										<view class="img-wrap" @click="preview(index)">
											<image class="img" :src="item.files_path"	mode="widthFix"></image>
										</view>
									</view>
								</view>
								
							</view>
						</view> 
					</view>	
				</view>
				
				<view v-if="form_status==2" class="goods-wrap m-b2">
					<view class="hd-title">
						<u--text class="" text="上传图片(订单物流凭证/货物图片)" size="30" align="left" bold></u--text> 
					</view>	
					<view class="upload-wrap">
						<u-upload
							width="180"
							height="180"
							:fileList="form.fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							:previewFullImage="true"
							name="1"
							multiple
							:maxCount="10"
						></u-upload>
					</view>
					
				</view>
				  
			</template>
			  
			
		</view>  
		<u-popup :show="stores.isShowstores" mode="center" @close="stores.isShowstores=false" :closeable="true">
			<view class="update-apply-reason">
				<u--text text="选择仓库" size="30" bold align="center" class="m-b2"></u--text>
				<u--form ref="uForm" class="store-form-wrap m-b2"> 
					<u-form-item label="选择仓库" labelWidth="160" prop="categoryname" borderBottom="true" class="u-form-item" @click="stores.isShow=true;">
						<u-input placeholder="选择仓库" v-model="form.store_name" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;" class="u-form-item" />
						<u-icon	slot="right" name="arrow-right"></u-icon>						
					</u-form-item>
				</u--form>
				<view v-if="sendDetail.p_id&&form.store_name" class="detail-info">
					<view class="item m-b2">货 物：{{sendDetail.p_name}}</view>					
					<view class="item m-b2">仓库管理员：{{currentStore.store_username}}</view>
					<view class="item m-b2">库存数量：{{currentStore.p_count}}</view>
					<view class="item m-b2">出货数量：{{sendDetail.p_num}}</view>	
					<view class="item m-b2">状态：{{currentStore.p_count>sendDetail.p_num?'充足':'不足'}}</view> 
				</view>
				<u-button type="primary" text="确定" size="small" @click="sendStore"></u-button>
			</view>
		</u-popup>
		
		<u-popup :show="isupdateapplyreason" mode="center" @close="isupdateapplyreason=false" :closeable="true">
			<view class="update-apply-reason" style="width: 450rpx;">
				<u--text text="更新备注" size="30" bold align="center" class="m-b2"></u--text>
				<u--form ref="uForm" class="form-wrap m-b2">
					<u--textarea v-model="apply_reason" placeholder="请输入新备注" :maxlength="300" count ></u--textarea>
				</u--form>
				<u-button type="primary" text="确定" size="small" @click="updateapplyreason"></u-button>
			</view>
		</u-popup>
		
		<!-- <template v-if="detail.apply_user == userInfo.id || detail.sp_user == userInfo.id || detail.last_receive_user == userInfo.id">
			<view v-if="detail.apply_status != '-1' || detail.apply_status != 3 || detail.apply_status != 5" class="fixed-btn bz" @click="show=true" >
				<image src="../../static/images/time_icon.png" mode="widthFix"></image>
				<text>更新备注</text>
			</view>
		</template> -->
		
		<u-picker :show="stores.isShow" :columns="stores.data" keyName="sname" :defaultIndex="stores.defaultIndex" itemHeight="90" :closeOnClickOverlay="true" @cancel="stores.isShow=false" @confirm="changeStore" @close="stores.isShow=false"></u-picker>
		
		<c-footer v-if="form_status==2"> 
			<view slot="content" class="foot-btn-wrap"> 
				<view class="btn add-btn" @click="add">发货</view>	
				<view class="btn send-btn" @click="stores.isShowstores=true">转给其他仓库</view>				
			</view>			
		</c-footer>
	</view>
</template>

<script> 
	import {uploadToServe,previewImage} from '@/common/util.js'
	import {IMG_PATH} from '../../config.js' 
	export default {
		data() {
			return { 
				show:false,
				isIphoneX:getApp().globalData.isIphoneX,   
				userInfo:uni.getStorageSync('userInfo'),
				detail:{},
				apply_id:'',
				apply_type:'',
				form: {
					pid:'',
					apply_type:6,
					send_name:'',
					send_num:'',
					pay_money:'',
					send_storehouseman:'',
					last_receive_user:'',
					fileList1:[],
					storehouse:'',
					storehouseman:'',
					store_name:''
				},
				form_status:'',
				apply_reason:'',
				stores:{
					isShowstores:false,
					isShow:false,
					data:[[]],
					defaultIndex:[],
				},
				currentStore:{},
				sendDetail:{
					p_id:'',
					p_name:'',
					p_num:0, 
				},
				isupdateapplyreason:false
			}
		},
		async onLoad(params) { 
			console.log(this.userInfo)
			this.apply_id=params.apply_id;
			this.apply_type=params.apply_type;
			this.form_status=params.form_status;
			this.getmedetails(); 
		},
		onShow() {
			
		}, 
		methods: { 
			copy(data){
				uni.setClipboardData({
					data:data
				})
			},
			call(phone){
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			showapplyreason(){
				this.isupdateapplyreason=true;
				// this.apply_reason=this.detail.username+','+this.currentStore.store_username+','+this.detail.last_receive_user
			},
			async updateapplyreason(){
				if(this.apply_reason==''){
					this.$showToast({
						title:'请输入新备注' 
					})
					return
				}
				let res=await this.$api.user_api.meapplyreason({
					apply_id:this.apply_id,
					decript:this.apply_reason
				}) 
				if(res.data.code==200){
					this.getmedetails();
					this.isupdateapplyreason=false;
					// this.close();
				}
			},
			
			// 图片预览
			preview: function(idx) {
				let img_list = [];
				this.detail.files_path.forEach(item => {
					img_list.push(item.files_path)
				})
				previewImage({
					data: img_list,
					index: idx
				})
			}, 
			send(){
				
			},
			async sendStore(){ 
				let {storehouse,storehouseman,store_name}=this.form;
				if(!storehouse){
					this.$showToast({
						title:'该选择仓库' 
					})
					return
				}
				if(Number(this.currentStore.p_count)<this.sendDetail.p_num){
					this.$showToast({
						title:'该仓库库存不足' 
					})
					return
				}
				
				let res=await this.$api.user_api.changestock({
					apply_id:this.apply_id,
					storehouse,
					storehouseman,
					store_name
				}) 
				if(res.data.code==200){
					this.$store.commit('KUCUN_SHENPI_UPDATE',1);
					uni.navigateBack({
						delta:1
					})
				}
			},
			
			changeStore(e){ 
				console.log(e)
				let value=e.value[0]; 
				this.stores.defaultIndex=e.indexs;
				this.currentStore=e.value[0];
				this.form.storehouse=value.storehouse;
				this.form.storehouseman=value.storehouseman;
				this.form.store_name=value.sname;
				this.stores.isShow=false; 
			},
			
			// 删除图片
			deletePic(event) {
				this.form.fileList1.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let api_url='/api/product/uploadfile';
				let fileListLen = this.form.fileList1.length
				lists.map((item) => {
					this.form.fileList1.push({
						...item,
						name:''
					})
				})  
				for (let i = 0; i < lists.length; i++) {
					// const result = await this.uploadfile(lists[i].url)
					uploadToServe({
						url: api_url,
						filePath: lists[i].url,
						name: 'fileinput',
						formData: {
							apply_id:'',
							apply_type:3   // 1入库,2出库,3发货,4（货款）结清
						}
					}).then((res)=>{ 		 
						let item = this.form.fileList1[fileListLen];
						
						this.form.fileList1.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: `${IMG_PATH}${res.data.file_path}/${res.data.file_name}`,
							name:res.data.file_name
						}))
						fileListLen++   
					}) 
				}
				
			}, 
			
			async getmedetails(){
				let res=await this.$api.user_api.medetails({
					notice_id:'',
					apply_id:this.apply_id
				});      
				
				if(res.data.code==200){
					this.show=true;  
					let stores=[];
					console.log(123123,res.data.data.m)
					res.data.data.m.product_list.forEach(i=>{
						if(i.inout_branch&&i.inout_branch.length>0){
							i.inout_branch.forEach(j=>{
								if(j.storehouseman==this.userInfo.id){  
									this.sendDetail.p_id=j.p_id;
									this.sendDetail.p_name=j.pname;
									this.sendDetail.p_num+=Number(j.num)
								} 
							})
						}
						if(i.p_id==this.sendDetail.p_id){
							i.hp_count.forEach(k=>{
								if(k.storehouseman!=this.userInfo.id){
									this.stores.data[0].push(k); 
								}
							})
						}
						
					})   
					console.log(4554,res.data.data.m)
					res.data.data.m.files_path.forEach(item=>{
						item.files_path=IMG_PATH+item.file_path+'/'+item.files_path; 
					})
					this.detail=res.data.data.m;  
					console.log(123123,this.detail)
				} 
			}, 
			
			async add(){
				let {send_name,send_num,pay_money}=this.form;
				let pid=[]; 
				this.detail.product_list.forEach(item=>{
					pid.push(item.p_id)
				})
				let files=[]; 
				this.form.fileList1.forEach(item=>{
					files.push(item.name)
				})
				
				if(this.form_status==2){
					if(send_name==''){
						this.$showToast({
							title:'请填写物流名字' 
						})
						return
					}
					if(send_num==''){
						this.$showToast({
							title:'请填写物流单号' 
						})
						return
					}
					if(pay_money==''){
						this.$showToast({
							title:'请填写物流费用' 
						})
						return
					} 
					if(this.form.fileList1.length==0){
						this.$showToast({
							title:'请上传图片(订单物流凭证/货物图片)' 
						})
						return
					} 
				}
				
				uni.showLoading({
					title:'数据提交中'
				})  
				let res=await this.$api.user_api.mesendwx({
					pid:1,
					apply_type:this.apply_type,
					apply_id:this.apply_id,
					send_name,
					send_num,
					pay_money,
					last_receive_user:this.detail.last_receive_user,
					files:files.join(','),
				})   
				
				uni.hideLoading();
				if(res.data.code==200){
					this.$store.commit('KUCUN_SHENPI_UPDATE',1);
					uni.navigateBack({
						delta:1
					})
				}
			} 
		}
		
	}
</script>

<style lang="less" scoped>
	.update-apply-reason{
		padding:30rpx; 
		margin: 0 auto; 
	}
	.store-form-wrap{
		width: 100%;
		.u-form-item{
			width: 100%;
		}
	}
	.send-store-list {
		.hd{
			background: #f5f5f5;
			font-weight: bold;
		}
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 40rpx;
			line-height: 40rpx;
			font-size: 30rpx;
			text-align: center;
			text{
				flex-grow: 1;
				width: 1%;  
			}
		} 
	}
	.foot-btn-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.btn{
			flex-grow: 1;
			margin: 5px 10rpx;
			height: 36px;
			line-height: 36px; 
			font-size: 30rpx;
			text-align: center;
			border-radius: 8rpx;
			color: #fff;
		}
		.add-btn{		
			background: #1cab1b; 
		}  
		.cancle-btn{
			background: #ff9600; 
		}
		.send-btn{
			background: #09f;
		}
	}
	.goods-wrap{
		padding: 10rpx 20rpx;
		background: #fff;
		.hd-title{
			padding: 20rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}
		.row-2{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.item{
			flex-grow: 2;
			display: flex;
			padding: 15rpx 0; 
			font-size: 30rpx;
			.label{ 
				font-weight: bold;
				flex-shrink: 0;
			}
			.store-list{
				flex-grow: 2;
				display: flex;
				flex-wrap: wrap; 
				max-width: 85%; 
				text{ 
					margin-bottom: 10rpx;
					width: 48%;
					margin-right: 2%;
				}
			}
		}
		
	}  
	.detail-info{
		font-size: 30rpx;			
		.item{  
		} 
		.row-2{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			.item{
				width: 50%;
			} 
		}
	}
	.hd-title{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
	}
	.upload-wrap{
		padding:20rpx;		
		background: #fff;
	}
	.u-form-item{
		.text-inp{
			width: 160rpx;
		}
		.text-unit{
			width: 180rpx;
		}
	}
	.form-wrap{ 
		.row-2{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
	.slot-content{
		.hd{
			padding: 30rpx 0 10rpx;
			font-size: 30rpx;
		}
	}
	.popup-form-wrap{
		padding:20rpx;
		border-radius: 15rpx;		 
	}
	.select-pz-wrap{
		display: flex;
		flex-wrap: wrap;
		.item{
			position: relative; 
			margin:0 20rpx 20rpx 0;
			.del-icon{
				position: absolute;
				right: -15rpx;
				top: -15rpx;
			}
		}
	}
	
	.partslist-popup{ 
		position: relative;
		height: 100%;
		padding: 0 40rpx; 
		.hd{ 
			height: 40px;
		}
		.select-wrap{
			height: 80%;
			flex-grow: 2;
			margin: 20rpx 0;
			overflow-y: auto; 
			.item{
				margin-bottom: 20rpx;
			}
		}
		.btn-wrap{  
			margin: 20rpx 0;
			.btn{
				margin: 0 30rpx;
			}
		}
	}
</style>

 